<template>
    <pre style="padding-left: 0">  
        
        指令是带有 v- 前缀的特殊 attribute。 
        官网地址：https://cn.vuejs.org/api/built-in-directives.html#v-html        
      <code class="language-Markup  line-numbers">
        v-if v-else v-else-if 条件判断 
            v-else-if必须有 v-if 或 v-else-if
            &lt;div v-if="type === 'A'"&gt;
            A
            &lt;/div&gt;
            &lt;div v-else-if="type === 'B'"&gt;
            B
            &lt;/div&gt;
            &lt;div v-else-if="type === 'C'"&gt;
            C
            &lt;/div&gt;
            &lt;div v-else&gt;
            Not A/B/C
            &lt;/div&gt;
            注意点：v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
            v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
            相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。
            总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

            v-for 
            基于原始数据多次渲染元素或模板块。
            &lt;div v-for="item in items" :key="item.id"&gt;
            &#123;&#123; item.text &#125;&#125;
            &lt;/div&gt;
            注意点：同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。查看官网：https://cn.vuejs.org/guide/essentials/list.html#v-for-with-v-if
      

            v-text (基本上不太用)
            v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。
            如果你需要更新 textContent 的部分，应该使用 mustache interpolations 代替。            
            &lt;span v-text="msg"&gt; &lt;/span&gt;
            &lt;!-- 等同于 --&gt 
            &lt;span&gt &#123;&#123;msg&#125;&#125;&gt;&lt;/span&gt;

             v-html(基本上不用)
            v-html 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html 来编写模板，不如重新想想怎么使用组件来代替。
            &lt;div v-html="html"&gt;&lt;/div&gt;


            v-show
            v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。
            会生成DOM在界面上
            &lt;h1 v-show="ok"&gt;Hello!&lt;/h1&gt;

          
            v-model
            在表单输入元素或组件上创建双向绑定。
            v-slot
            用于声明具名插槽或是期望接收 props 的作用域插槽。
            v-pre
            跳过该元素及其所有子元素的编译。
            v-once
            仅渲染元素和组件一次，并跳过之后的更新。
            v-memo  3.2新增
            缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。
            v-cloak
            用于隐藏尚未完成编译的 DOM 模板。

            自定义指令：https://cn.vuejs.org/guide/reusability/custom-directives.html
        </code>
    </pre>
  </template>
  <script lang="ts" setup> 
      import { onMounted } from "vue";
  import Prism from "prismjs";
  onMounted(()=>{
    Prism.highlightAll();
  })
  </script>